<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击按钮获取段子</button>
  <script>
    // http://api.xiaohigh.com/duanzi
    function sendAJAX(method, url) {
      return new Promise((resolve, reject) => {
        //AJAX 请求
        let xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        //初始化
        xhr.open(method, url);
        //发送
        xhr.send();
        //绑定事件
        xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve({
              status: xhr.status,
              statusText: xhr.statusText,
              headers: xhr.getAllResponseHeaders(),
              data: xhr.response,
              config: {
                url: url,
                method: method
              },
              request: xhr,
            });
          } else {
            reject(xhr.status);
          }
        }
      });
    }

    //获取按钮
    let btn = document.querySelector('button');

    btn.onclick = async function () {
      try {
        //获取请求体
        let body = await sendAJAX('get', 'http://api.xiaohigh.com/duanzi');
        console.log(body);
      } catch (status) {
        console.log(status);
      }
    }

  </script>
</body>

</html>